<template>
  <div :style="_Style" :class="_class">
    <span v-if="priceObj.label" :style="labelStyleComputed">{{ label }}</span>
    <div :style="priceBoxStyle">
      <span v-if="priceObj.unit" :style="unitStyleComputed">{{ priceObj.unit }}</span>
      <span :style="priceStyleComputed">{{ priceObj.price }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { PriceShowTypeEnum } from '@/enums/activityEnum';
  import { getPriceObject } from './util';
  import { computed } from 'vue';

  const props = defineProps({
    _class: {
      type: String,
      default: '',
    },

    _Style: {
      type: String,
      default: '',
    },
    label: {
      type: String,
      default: '',
    },
    labelStyle: {
      type: String,
      default: '',
    },
    minPrice: {
      type: Number,
      default: 0,
    },
    maxPrice: {
      type: Number,
      default: 0,
    },
    priceShowType: {
      type: Number as () => PriceShowTypeEnum,
      default: PriceShowTypeEnum.Zero,
    },
    unitStyle: {
      type: String,
      default: '',
    },
    priceStyle: {
      type: String,
      default: '',
    },
    /**
     * 是否统一样式
     */
    isUnifiedStyle: {
      type: Boolean,
      default: false,
    },
    /**
     * 统一样式
     */
    unifiedStyle: {
      type: String,
      default: '',
    },
    priceBoxStyle: {
      type: String,
      default: '',
    },
  });

  const unitStyleComputed = computed(() => {
    if (!props.isUnifiedStyle && !props.unitStyle) return props.priceStyle;
    return props.isUnifiedStyle ? props.unifiedStyle : props.unitStyle;
  });

  const priceStyleComputed = computed(() => {
    return props.isUnifiedStyle ? props.unifiedStyle : props.priceStyle;
  });

  const labelStyleComputed = computed(() => {
    return props.isUnifiedStyle ? props.unifiedStyle : props.labelStyle;
  });

  const priceObj = computed<{ unit?: string; price: string | number; label: string | undefined }>(
    () => {
      return getPriceObject(props.priceShowType, props.minPrice, props.maxPrice, props.label);
    },
  );
</script>
